<template>
   <div class="buy-list-area">
       <div class="header">
           <p class="p1">限时采集清单</p>
           <p class="p2">FLASH SALE</p>
       </div>
       <!-- <div class="tab" v-for="item in tabItem">
           <div class="tab-item">{{item}}</div>
       </div> -->
       <div class="tab">
           <div class="tab-item" v-for="(item,index) in tabItem" :class="{active:(currentIndex===index)}" @click="itemClick(index)"><p>{{item}}</p></div>
       </div>
       <div class="list-content">
           <div class="list-content-item">
               <img src="@/assets/image/supply/list-item.jpg" class="list-item-icon" alt="">
               <div class="detail">
                   <p class="title">NR-950金红石型钛白粉  通用型二氧化钛  高遮盖钛白粉</p>
                   <img class="progress-icon" src="../../assets/image/supply/progress.png" alt="">
                   <span class="quantity">300吨</span>
                   <span class="price-text">价格：</span><span class="price-value">￥15500.00</span>
                   <img src="../../assets/image/supply/price-icon.png" class="price-icon" alt="">
               </div> 
               <div class="time">
                   <span class="time-text">距离本次活动结束</span>
                   <div class="time-value">
                       <span>06</span>
                       <span>:</span>
                       <span>12</span>
                       <span>:</span>
                       <span>10</span>
                   </div>
                   <div class="buy-now">马上抢</div>
               </div>
           </div>
              <div class="list-content-item">
               <img src="@/assets/image/supply/list-item.jpg" class="list-item-icon" alt="">
               <div class="detail">
                   <p class="title">NR-950金红石型钛白粉  通用型二氧化钛  高遮盖钛白粉</p>
                   <img class="progress-icon" src="../../assets/image/supply/progress.png" alt="">
                   <span class="quantity">300吨</span>
                   <span class="price-text">价格：</span><span class="price-value">￥15500.00</span>
                   <img src="../../assets/image/supply/price-icon.png" class="price-icon" alt="">
               </div> 
               <div class="time">
                   <span class="time-text">距离本次活动结束</span>
                   <div class="time-value">
                       <span>06</span>
                       <span>:</span>
                       <span>12</span>
                       <span>:</span>
                       <span>10</span>
                   </div>
                   <div class="buy-now">马上抢</div>
               </div>
           </div>
              <div class="list-content-item">
               <img src="@/assets/image/supply/list-item.jpg" class="list-item-icon" alt="">
               <div class="detail">
                   <p class="title">NR-950金红石型钛白粉  通用型二氧化钛  高遮盖钛白粉</p>
                   <img class="progress-icon" src="../../assets/image/supply/progress.png" alt="">
                   <span class="quantity">300吨</span>
                   <span class="price-text">价格：</span><span class="price-value">￥15500.00</span>
                   <img src="../../assets/image/supply/price-icon.png" class="price-icon" alt="">
               </div> 
               <div class="time">
                   <span class="time-text">距离本次活动结束</span>
                   <div class="time-value">
                       <span>06</span>
                       <span>:</span>
                       <span>12</span>
                       <span>:</span>
                       <span>10</span>
                   </div>
                   <div class="buy-now">马上抢</div>
               </div>
           </div>
       </div>
   </div>
</template>

<script>
export default {
   name: '',
   data() {
       return {
           tabItem:['正在发布','即将开始','查看更多'],
           currentIndex:0
       }
   },
   methods:{
       itemClick(index){
                this.currentIndex = index;
            }
   },
  components: {}
}
</script>

<style scoped lang="less">
 .buy-list-area{
     width: 100%;
     background-color: #f8f9fa;
     .header{
         width: 100%;
         height: 1.6rem;
         position: relative;
         .p1{
             font-size: 0.4rem;
             color: #333333;
             position: absolute;
             left: 50%;
             top: 0.4rem;
             transform: translateX(-50%);
         }
         .p2{
             font-size: 0.24rem;
             color: #777777;
             position: absolute;
             left: 50%;
             top: 0.92rem;
             transform: translateX(-50%);
         }
         
     }
     .tab{
         width: 7.2rem;
         height: 0.7rem;
         margin: 0 auto;
        .tab-item{
            height: 100%;
            width: 2.4rem;
            background: #0b294d;
            float: left;
            color: #ffffff;
            font-size: 0.24rem;
            line-height: 0.7rem;
            text-align: center;
            
        }
     }
     .list-content{
         width: 7.2rem;
         height: 5.73rem;
         margin: 0 auto;
         display: flex;
         flex-wrap: wrap;
         align-content: space-around;
         .list-content-item{
             height: 1.4rem;
             .list-item-icon{
                width: 1.3rem;
                height: 1.4rem;
                float: left;
                
            }
            .detail{
                width: 3.45rem;
                height: 1.4rem;
                background-color:  white;
                float: left;
                margin-left: 0.15rem;
                margin-right: 0.6rem;
                position: relative;
                .title{
                    font-size: 0.24rem;
                    transform: scale(11/12);
                    transform-origin: 0 0;
                    color: #333333;
                    // height: 0.5rem;
                    position: absolute;
                    top: 0;

                }
                .progress-icon{
                    width: 2.56rem;
                    height: 0.13rem;
                    position: absolute;
                    top: 0.78rem;

                }
                .quantity{
                    font-size: 0.24rem;
                    transform: scale(3/4);
                    transform-origin: 0 0;
                    color: #808080;
                    position: absolute;
                    top: 0.7rem;
                    right: 0;
                }
                .price-text{
                    font-size: 0.24rem;
                    transform: scale(2/3);
                    color: #333333;
                    position: absolute;
                    bottom:0.02rem;
                    left: 0.12rem;
                }
                .price-value{
                    font-size: 0.27rem;
                    color: #f1393a;
                    position: absolute;
                    bottom: 0;
                    left: 0.6rem;
                    
                }
                .price-icon{
                    width: 0.86rem;
                    height: 0.26rem;
                    position: absolute;
                    bottom: 0.05rem;
                    right: 0.54rem;
                }

            }
            .time{
                float: left;
                height: 100%;
                width: 1.7rem;
                position: relative;
                
                .time-text{
                    position: absolute;
                    top: 0;
                    font-size: 0.24rem;
                    white-space: nowrap;
                    color: #777777;
                    transform: scale(5/6);
                    transform-origin: 0 0;
                }
                .time-value{
                    width: 100%;
                    position: absolute;
                    top: 0.4rem;
                    display: flex;
                    justify-content: space-between;
                    span{
                        display: block;
                    }
                    span:nth-child(odd){
                        width: 0.45rem;
                        height: 0.42rem;
                        background: #7c7c7d;
                        text-align: center;
                        color: #ffffff;
                        font-size: 0.24rem;
                        transform: scale(5/6);
                        transform-origin: 0 0;
                    }
                    span:nth-child(even){
                        font-size: 0.24rem;
                        transform: scale(5/6);
                        transform-origin: 0 0;
                        color:#7c7c7d;

                    }

                }
                .buy-now{
                    width: 1.66rem;
                    height: 0.6rem;
                    font-size: 0.24rem;
                    color: #ffffff;
                    background-color: red;
                    position: absolute;
                    bottom: 0;
                    text-align: center;
                    line-height: 0.6rem;
                }
            }
         }
     }
}
 .active{
        background-color: #d4aa58 !important;
    }
</style>
